<template>
  <el-card class="box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 300px">
      <el-breadcrumb-item style="font-size: 16px">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px">日志管理</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 16px"
        >异常日志管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="search">
      创建时间：
      <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="getDateChange"
      >
      </el-date-picker>
      <el-button
        @click="saerchLog()"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 5px"
        >搜索</el-button
      >
    </div>
    <el-table
      :data="userData"
      border
      style="width: 1061px"
      :header-cell-style="headClass"
    >
      <el-table-column label="序号" width="69" type="index" align="center"> </el-table-column>
      <el-table-column label="创建时间" width="200" prop="createDate" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户" width="90" prop="name" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="150" prop="roleName" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="URL" width="200" prop="params" :show-overflow-tooltip="true" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.url }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="IP" width="150" prop="ip" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ip }}</span>
        </template>
      </el-table-column>
      <el-table-column label="异常描述" width="200" prop="exceptionName" :show-overflow-tooltip="true" align="center">
        <template slot-scope="scope" >
          <span>{{ scope.row.exceptionName }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      layout="total, prev, pager, next"
      :total="queryInfo.count"
      background
    >
      <!--
        @current-change(页码发生改变时触发)
        :current-page(设置当前页码)
        :page-size(设置每页的数据条数)
        :total(设置总页数)
     -->
    </el-pagination>
  </el-card>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  data() {
    return {
      // 用户名填写 日期选择
      nowTime: "",
      nowUsername: "",
      // 时间 用户名显示
      dateValue: "",
      userName: "",
      //初始分页条件
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 9,
        count: 0,
      },
      // 保存请求回来的用户列表数据
      userData: [
        {
          id: null,
          // order: 1,
          createDate: "2021-11-16",
          name: "wyf",
          roleName: "超级管理员",
          exception: "11111111111111111111111111111111111111111111111111",
          url: "",
          ip: "",
          exceptionName: "删除用户信息",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 表格表头
    headClass() {
      //表头居中显示
      return "color:rgba(255,101,0);font-weight:bold;font-size:16px";
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCurrentChange: throttling(function (page) {
      this.queryInfo.pagenum = page;
      console.log("跳转了");
      // 重新按照pagenum发送请求 请求最新的数据
      this.getUserList_Token();
    }, 1000),
    // 得到用户名
    getUsername() {
      this.nowUsername = this.userName;
      console.log(this.nowUsername);
    },
    // 得到时间
    getDateChange(value) {
      if (value === null) {
        value = "";
      }
      this.nowTime = value;
      console.log(this.nowTime);
    },
    saerchLog: throttling(function () {
      this.$axios
        .get("/back/exceptionLogs", {
          params: {
            date: this.nowTime,
            page: this.queryInfo.pagenum,
            size: this.queryInfo.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.getUserList_Token();
        });
    }, 1000),
    getUserList_Token() {
      const token = window.sessionStorage.getItem("tokenvalue");
      this.$axios.defaults.headers.common["satoken"] = token;
      this.$axios
        .get("/back/exceptionLogs", {
          params: {
            date: this.nowTime,
            page: this.queryInfo.pagenum,
            size: this.queryInfo.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status === 666) {
            this.$message.error("请先登录");
            this.$router.replace("/login");
          } else {
            this.$message.success("获取日志列表成功！");
            this.userData = res.data.data;
            this.queryInfo.count = res.data.code;
          }
        });
    },
  },
  created() {
    this.getUserList_Token();
  },
};
</script>

<style scoped>
.box-card {
  position: relative;
  margin: 22px auto;
  min-height: 550px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.search {
  margin-top: 25px;
  margin-left: 10px;
  /* width: 400px; */
  /* position: absolute; */
  /* right: 80px;
  top: 6px; */
}

.el-table {
  margin-top: 20px;
}

/* .el-dialog .el-dialog__body {
  padding: 10px 20px;
} */

.el-dialog .el-dialog__body {
  padding: 10px 20px;
}

.el-form-item {
  margin-bottom: 10px;
}

.over-flow {
  /* width: 50px; 容器宽度 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 内容会被修剪，并且超过设置宽度的内容是不可见的 */
  text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
}

.pagination {
  /* border: 1px solid red; */
  position: absolute;
  bottom: 10px;
  width: 412px;
  /* margin: 5px auto; */
  /* height: 30px; */
  left: 50%;
  margin-left: -206px;
}
</style>